<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>购物车练习</title>
		<style type="text/css">
			table, tr, td {
				border: 1px solid;
				margin: 60px auto;
				border-collapse: collapse;
			}
			p {
				font-size: 25px;
				text-align: center;
			}
			td {
				padding: 10px;
			}
			tr:hover {
				background-color: #C5C5C5;
			}
			thead {
				background-color: #C5C5C5;
			}
		</style>
	</head>
	<body>
		<p>商品</p>
		<table id="product">
			<thead>
				<tr>
					<th>商品</th>
					<th>单价</th>
					<th>颜色</th>
					<th>库存</th>
					<th>好评率</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>鼠标</td>
					<td>80</td>
					<td>黑色</td>
					<td>893</td>
					<td>988</td>
					<td><button>添加购物车</button></td>
				</tr>
				<tr>
					<td>键盘</td>
					<td>150</td>
					<td>黑色</td>
					<td>9022</td>
					<td>966</td>
					<td><button>添加购物车</button></td>
				</tr>
				<tr>
					<td>手机壳</td>
					<td>60</td>
					<td>透明</td>
					<td>765</td>
					<td>998</td>
					<td><button>添加购物车</button></td>
				</tr>
				<tr>
					<td>U盘</td>
					<td>70</td>
					<td>红色</td>
					<td>482</td>
					<td>1009</td>
					<td><button>添加购物车</button></td>
				</tr>
				<tr>
					<td>蓝牙耳机</td>
					<td>100</td>
					<td>蓝色</td>
					<td>8937</td>
					<td>876</td>
					<td><button>添加购物车</button></td>
				</tr>
			</tbody>
		</table>
		<p>购物车</p>
		<table id="cart">
			<thead>
				<td>商品</td>
				<td>单价(元)</td>
				<td>数量</td>
				<td>全额</td>
				<td>删除</td>
			</thead>
			<tbody id="cartArea"></tbody>
			<tfoot>
				<tr>
					<td colspan="3">总计:</td>
					<td id="total"></td>
					<td></td>
				</tr>
			</tfoot>
		</table>
		<script type="text/javascript">
			
		</script>
	</body>
</html>
